<!doctype html>
<html>
 <head>
  <meta charset="UTF-8">
  <meta name="Keywords" content="关键字">
  <meta name="Description" content="简要介绍">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1,user-scalable=no">
  <title>魅族移动端实战</title>
  <link rel="stylesheet" href="css/base.css">
  <link rel="stylesheet" href="css/index.css">
 </head>
 <body>
	<section id="wrap">
		<header id="header">
			<div class="h-tit">
				<h1>
					<a href="#">
						<img src="images/logo.svg" alt="">
					</a>
				</h1>
				<form action="#" method="#" id="seach">
					<input type="text" placeholder="魅蓝"/>
				</form>
				<a href="" class="h-cart"></a>
				<span class="h-menu"></span>
			</div>
			<nav class="h-nav">
				<ul>
					<li><a href="">推荐</a></li>
					<li><a href="">手机</a></li>
					<li><a href="">配件</a></li>
					<li><a href="">影音</a></li>
					<li><a href="">数码智能</a></li>
					<li><a href="">居家生活</a></li>
				</ul>	
			</nav>
		</header>
		<section id="main">
			<div class="banner">
				<ul class="banner-pic">
					<li><a href=""><img src="images/banner4.jpg" alt=""></a></li>
					<li><a href=""><img src="images/banner1.jpg" alt=""></a></li>
					<li><a href=""><img src="images/banner2.jpg" alt=""></a></li>
					<li><a href=""><img src="images/banner3.jpg" alt=""></a></li>
					<li><a href=""><img src="images/banner5.jpg" alt=""></a></li>
				</ul>
				<ul class="banner-page">
					<li></li>
					<li></li>
					<li></li>
					<li></li>
					<li></li>
				</ul>
			</div>
			<div class="m-bar">
				<span><img src="images/icon2.png" alt="">魅族官方商城</span>
				<span><img src="images/icon2.png" alt="">全场顺丰包邮</span>
				<span><img src="images/icon2.png" alt="">7天无理由退货</span>
			</div>
			<div	class="m-activity">
				<ul>
					<li><a href="">
							<img src="images/activity1.png" alt="">
							<p>超级福利站</p>
						</a></li>
					<li><a href="">
							<img src="images/activity2.png" alt="">
							<p>推荐有奖</p>
						</a></li>
					<li><a href="">
							<img src="images/activity3.png" alt="">
							<p>一周上新</p>
						</a></li>
					<li><a href="">
							<img src="images/activity4.png" alt="">
							<p>APP专享</p>
						</a></li>
				</ul>	
			</div>
			<div class="m-recommend clearfix">
				<a href="">
					<img src="images/recommend1.png" alt="">
				</a>
				<a href="" class="fl">
					<img src="images/recommend2.jpg" alt="">
				</a>
				<a href="" class="fl">
					<img src="images/recommend3.jpg" alt="">
				</a>
			</div>
			<div class="m-phone-list">
				<h2 class="tit line">智能手机</h2>
			</div>
		</section>
	</section>
	<script>
		  (function change(){
			var oFz = document.getElementsByTagName("html")[0];
			var width = window.innerWidth;
			oFz.style.fontSize = width/10 +"px";
			window.onresize=function(){change();};
		})();
	</script>

 </body>
</html>
